<template>
	<view class="addmoney">
		<headassy title="申请费用" :isTab="false" :isSearch="false"></headassy>
		<view class="addmoney-content">
			<view class="">
				<view style="border-radius: 10rpx;" v-for="(item,index) in form.feeListList" :key="index">
					<view class="top u-flex-between mt-5">
						<view class="left">
							费用{{index}}
						</view>
						<view class="right">
							<view class="cus-red-btn" @click="delitem(index)">
								删除
							</view>
						</view>
					</view>
					<view class="form">
						<u--form labelPosition="left" ref="uForm">
							<u-form-item label="申请类型" borderBottom labelWidth="200" @click="tapShow2(index)">
								<u--input border="none" v-model="item.applyType"></u--input>
							</u-form-item>
							<u-form-item label="申请费用" borderBottom labelWidth="200" @click="tapShow(index)">
								<u--input border="none" v-model="item.name"></u--input>
							</u-form-item>
							<u-form-item label="申请金额" borderBottom labelWidth="200">
								<u--input border="none" v-model="item.money"></u--input>
							</u-form-item>
							<u-form-item label="申请数量" borderBottom labelWidth="200">
								<u--input border="none" v-model="item.qty"></u--input>
							</u-form-item>
							<u-form-item label="附件" borderBottom labelWidth="200">
								<u-upload uploadIcon="plus" width="132" height="132" :maxCount="10" :fileList="item.imglist" @afterRead="afterRead($event, index)" @delete="deleteImg($event, index)"></u-upload>
							</u-form-item>
							<u-form-item label="备注" labelWidth="200">
								<u--input border="none" v-model="item.remark"></u--input>
							</u-form-item>
						</u--form>
					</view>
				</view>
				<view class="add">
					<view class="cus-oragen-btn" @click="addmoney">
						增加费用+
					</view>
				</view>
			</view>
			<view class="form" style="border-radius: 10rpx;  margin-bottom: 140rpx;">
				<u--form labelPosition="left" ref="uForm">
					<u-form-item label="申请备注"ref="item1" labelWidth="200">
						<u--input border="none" v-model="data.applyRemark"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		
		<view class="footer">
			<button  class="custom-style" @click="commitMoney">确认申请</button>
		</view>
		<view>
			<u-picker :show="show" :columns="moneystatuslist" keyName="title" @confirm="confirm" confirmColor="#fd7400" itemHeight="88"></u-picker>
			<u-picker :show="show2" :columns="sqstatus" keyName="name" @change="changeHandler2"
			confirmColor="#fd7400"
			itemHeight="88"
				@confirm="confirm2"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moneystatus: {
					custAccId: '',
					feeName: ''
				},
				moneystatuslist: [],
				show: false,
				moneytitle: [],
				loading: false,
				form: {
					feeListList: [{
						applyType: '',
						name: '',
						money: '',
						remark: '',
						qty: '',
						annex: '',
						imglist: []
					}]
				},

				sqstatus: [
					[{
						applyType: 1,
						name: '1'
					}, {
						applyType: 2,
						name: '2'
					}]
				],
				data: {
					custAccId: '',
					acId: '',
					workId: '',
					applyRemark: '222',
				},
				show2: false,
				imglist:[''],
				showIndex: -1
			};
		},
		onLoad(e) {
			this.data.workId = e.workId
			this.data.custAccId = uni.getStorageSync('custAccid')
			this.data.acId = uni.getStorageSync('acId')
			this.moneystatus.custAccId = uni.getStorageSync('custAccid')
			this.getServiceFees()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				
				this.getServiceFees()
				
			},
			async getServiceFees() {
				const res = await uni.$api.money2.getServiceFees({
					...this.moneystatus
				})
				this.moneystatuslist.push(res.data)
				for (let i = 0; i < this.moneystatuslist.length; i++) {
					this.moneytitle.push(this.moneystatuslist[i].title)
				}
				uni.stopPullDownRefresh()
			},
			tapShow(index){
				this.show = true;
				this.showIndex = index;
				console.log('tapShow', index, this.form.feeListList[index])
			},
			tapShow2(index){
				this.show2 = true;
				this.showIndex = index;
				console.log('tapShow2', index, this.form.feeListList[index])
			},
			changeHandler2(e) {
				console.log(e)
			},
			confirm(e) {
				//console.log('confirm', e, this.form.feeListList)
				this.form.feeListList[this.showIndex].name = e.value[0].title;
				// this.form.feeListList.forEach((item)=>{
				// return item.name= e.value[0].title
				// })
				this.show = false
			},
			confirm2(e) {
				this.show2 = false
				//console.log('confirm2', e, this.form.feeListList)
				this.form.feeListList[this.showIndex].applyType = e.value[0].applyType;
				// this.form.feeListList.forEach((item)=>{
				// return item.applyType= e.value[0].name
				// })
			},
			selectstatus(index) {
				this.show = true
				console.log(index)
				this.feeListList[index].name = e.value[0].name
			},
			// 保存费用
			async commitMoney() {
				this.form.feeListList.forEach(item => {
					let list = [];
					item.imglist.forEach(img => {
						if(img.load == 1){
							list.push(img.img)
						}
					});
					item.annex = list.join(',');
					delete item.imglist;
				});
				
				console.log(this.data, this.form)
				
				const res = await uni.$api.money2.commitMoney({
					...this.data,
					...this.form
				})
				console.log(res)
				if(res.code===0){
					uni.showToast({
						title:'申请费用成功'
					})
				}
			},
			// 新增费用
			addmoney() {
				this.form.feeListList.push({
					applyType: '',
					name: '',
					money: '',
					remark: '',
					qty: '',
					annex: '',
					imglist: []
				})
				console.log(this.form)
			},
			// 删除费用
			delitem(index) {
				console.log(index)
				this.form.feeListList.splice(index, 1)
			},
			deleteImg(e, index){
				console.log(e, index);
				this.form.feeListList[index].imglist.splice(e.index, 1);
			},
			afterRead(e, index){
				this.form.feeListList[index].imglist.push({
					url: e.file.url,
					img: '',
					load: 0
				});
				this.uploadimg(e.file.url, index, this.form.feeListList[index].imglist.length - 1);
				console.log(e, index)
			},
			// 费用上传图片
			async uploadimg(url, index, i){
				const res = await uni.$api.work.uploadimg(this.data.custAccId, {
					name: 'file',
					filePath: url
				});
				if(res.data){
					this.form.feeListList[index].imglist[i].img = res.data;
					this.form.feeListList[index].imglist[i].load = 1;
				}
				console.log('uploadimg', res, this.form.feeListList[index])
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	// .u-toolbar{
	// 	border-bottom: 1px solid #e5e5e5;
	// }
	
	
	.addmoney {
		min-height: 100vh;
		background-color: #f5f5f5;
		position: relative;
		
		.addmoney-content {
			padding: 20rpx;
		}
		
		.top {
			padding: 23rpx 30rpx;
			border-bottom: solid 1px #f5f5f5;
			font-size: 28rpx;
			background-color: #fff;
		}

		.form {
			padding-left: 15px;
			background-color: #fff;
		}

		.add {
			padding: 10px 20px;
			display: flex;
			background-color: #f5f5f5;
		}

		.footer {
			padding: 10px;
			background: #fff;
			bottom: 0;
			width: 100%;
			border-top: solid 1px #f2f2f2;
			box-sizing: border-box;
			position: fixed;
			z-index: 100;
		}

		.custom-style {
			background-color: #fd7400;
			color: #fff;
		}
	}
</style>